import React, { useState, useRef } from 'react'
import GoBack from '@/components/TheGoBack'
import '../../style/style.less'
import { Form, DatePicker, Select, Button, Space } from 'antd'
import TheTable from '@/components/TheTable'
import TheButton from '@/components/TheButton'
import TheDialog from '@/components/TheDialog'
import TheImage from '@/components/TheImage'
import { ExclamationCircleFilled } from '@ant-design/icons'
import ThePagination from '../../../../components/ThePagination'
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'
import {
  apiGetStoresEvaluation,
  apiGetStoresEvaluationView,
  apiGetStoresEvaluationDel,
} from '@/request/commodity'

const { RangePicker } = DatePicker
// const { TextArea } = Input;
const Search = ({ getValue }) => {
  const formRef = useRef()
  const [createTimeStart, setCreateTimeStart] = useState('')
  const [createTimeEnd, setCreateTimeEnd] = useState('')
  const options = [
    {
      label: '好评',
      value: 'H',
    },
    {
      label: '中评',
      value: 'Z',
    },
    {
      label: '差评',
      value: 'C',
    },
  ]
  const dateChange = (date) => {
    setCreateTimeStart(getDateTime3(date[0]))
    setCreateTimeEnd(getDateTime3(date[1]))
  }
  const onFinish = (values) => {
    values.createTimeStart = createTimeStart
    values.createTimeEnd = createTimeEnd
    delete values.time
    _.forIn(values, (v, k) => {
      if (!v) delete values[k]
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      time: [],
      evaluationType: '',
    })
    getValue({})
  }
  return (
    <div className="p-search-box" style={{ marginTop: 15 }}>
      <Form ref={formRef} onFinish={onFinish} layout="inline">
        <Form.Item label="评论时间" name="time">
          <RangePicker onChange={dateChange} />
        </Form.Item>
        <Form.Item label="评价类型" name="evaluationType">
          <Select placeholder="全部" style={{ width: 160 }} options={options} />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  )
}

class Evaluate extends React.Component {
  state = {
    columns: [
      {
        title: '用户昵称',
        dataIndex: 'memberName',
        key: 'memberName',
      },
      {
        title: '评论时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '商品规格',
        dataIndex: 'skuInfo',
        key: 'skuInfo',
        render: (text, record) => {
          let skuInfo = JSON.parse(record.skuInfo)
          let { skuAttribute } = skuInfo
          let arr = skuAttribute.map((v) => {
            return v.value
          })
          return arr
        },
      },
      {
        title: '评价类型',
        dataIndex: 'evaluationType',
        key: 'evaluationType',
        render: (text, record) => {
          let label = ''
          switch (record.evaluationType) {
            case 'H':
              label = '好评'
              break
            case 'Z':
              label = '中评'
              break
            case 'C':
              label = '差评'
              break
          }
          return label
        },
      },
      {
        title: '评价内容',
        dataIndex: 'evaluationContent',
        key: 'evaluationContent',
        render: (text, record) => {
          return <div className="p-white-space">{record.evaluationContent}</div>
        },
      },
      {
        title: '评论图片',
        dataIndex: 'images',
        key: 'images',
        render: (text, render) => {
          let images = _.toString(render.images).split(',')
          images = images.map((v, i) => {
            return <TheImage src={v} width={80} height={80} />
          })
          return <div style={{ display: 'flex', columnGap: 5 }}>{images}</div>
        },
      },
      {
        title: '操作',
        render: (text, render) => {
          return (
            <div>
              <TheButton
                onClick={() =>
                  this.openDialog(render.storeEvaluationId || '800000001')
                }>
                查看回复
              </TheButton>
              <TheButton
                onClick={() => this.deleteConfirm(render.storeEvaluationId)}>
                删除
              </TheButton>
            </div>
          )
        },
      },
    ],
    dataSource: [],
    dialogStatus: false,
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchValue: {},
    replyData: {},
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { productId, storeId } = this.props.match.params
    const { searchValue, pageData } = this.state
    let res = await apiGetStoresEvaluation({
      productId,
      storeId,
      ...searchValue,
      ...pageData,
    })
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize,
        },
        total: res.totalCount,
      })
    }
  }
  dialogCancel = () => {
    this.setState({ dialogStatus: false })
  }
  openDialog = async (storeEvaluationId) => {
    const { storeName } = this.props.match.params
    let res = await apiGetStoresEvaluationView({ storeEvaluationId })
    if (res.data && res.code === 0) {
      this.setState({
        dialogStatus: true,
        replyData: {
          evaluationContent: res.data.evaluationContent,
          storeName,
          createTime: res.data.createTime,
          storeReply: res.data.storeReply,
        },
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState(
      {
        pageData: {
          pageNo,
          pageSize,
        },
      },
      () => {
        this.getData()
      }
    )
  }
  deleteConfirm = (storeEvaluationId) => {
    React.$confirm({
      title: '您确认删除此条回复吗？',
      onOk: async () => {
        let res = await apiGetStoresEvaluationDel({ storeEvaluationId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功',
          })
          this.getData()
        }
      },
    })
  }
  getValue = (value) => {
    this.setState(
      {
        searchValue: value,
      },
      () => {
        this.getData()
      }
    )
  }
  render() {
    const {
      columns,
      dataSource,
      dialogStatus,
      pageData: { pageNo, pageSize },
      total,
      replyData,
    } = this.state
    return (
      <div className="p-layout-box commodity-list-evaluate">
        <GoBack history={this.props.history} title={'查看评论'} />
        <Search getValue={this.getValue} />
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          title={
            <div>
              <ExclamationCircleFilled
                style={{ color: '#FAAD14', marginRight: 10 }}
              />
              回复内容
            </div>
          }
          footer={null}
          visible={dialogStatus}
          width={400}
          handleCancel={this.dialogCancel}>
          <div className="evaluate-details-box">
            <div className="top">
              <div>{replyData.storeName}</div>
              <div>{replyData.createTime}</div>
            </div>
            <div className="middle">
              <div>回复内容：</div>
              <div>{replyData.storeReply}</div>
            </div>
            <div className="bottom">
              <Button type="primary" onClick={this.dialogCancel}>
                确认
              </Button>
            </div>
          </div>
        </TheDialog>
      </div>
    )
  }
}

export default Evaluate
